<template>
  <div class="swiper-container" @mouseenter="pauseAutoplay" @mouseleave="resumeAutoplay">
    <!-- Swiper主体 -->
    <swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="20"
      :loop="true"
      :autoplay="autoplay"
      :pagination="{ clickable: true }"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      class="my-swiper"
    >
      <!-- 图片幻灯片 -->
      <swiper-slide v-for="(item, index) in datalist.img" :key="'img-'+index">
        <img :src="item" class="swiper-media" alt="Slide image" @load="handleMediaLoad">
      </swiper-slide>

      <!-- 视频幻灯片 -->
      <swiper-slide v-for="(item, index) in datalist.video" :key="'video-'+index">
        <video 
          class="swiper-media" 
          muted
          preload="metadata"
          @loadedmetadata="handleMediaLoad"
        >
          <source :src="item" type="video/mp4">
          您的浏览器不支持 video 标签。
        </video>
      </swiper-slide>

      <!-- 自定义DOM幻灯片 -->
      <swiper-slide v-for="(item, index) in datalist.dom" :key="'dom-'+index">
        <div class="custom-dom">
          {{ item }}
        </div>
      </swiper-slide>
    </swiper>

    <!-- 导航按钮 -->
    <div class="swiper-button-prev" aria-label="Previous slide"></div>
    <div class="swiper-button-next" aria-label="Next slide"></div>

    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
// 导入Swiper相关组件和样式
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

const props = defineProps({
  datalist: {
    type: Object,
    required: true,
    default: () => ({
      img: [
        '/public/4.jpg',
        '/public/about1.jpg',
      ],
      video: [
        '/public/test.mp4',
        '/public/test1.mp4',
      ],
      dom: [
        '自定义内容1',
        '自定义内容2'
      ]
    })
  },
  autoplay: {
    type: Object,
    default: () => ({
      delay: 3000,
      disableOnInteraction: false
    })
  }
});

const modules = [Autoplay, Pagination, Navigation];
const swiperInstance = ref(null);

const onSwiper = (swiper) => {
  swiperInstance.value = swiper;
};

const onSlideChange = () => {
  if (!swiperInstance.value) return; 

  // 暂停所有视频
  document.querySelectorAll('.swiper-media').forEach(media => {
    if (media.tagName === 'VIDEO') {
      media.pause();
    }
  });
  
  // 播放当前视频
  const currentSlide = swiperInstance.value.slides[swiperInstance.value.activeIndex];
  const video = currentSlide.querySelector('video');
  if (video) {
    video.play().catch(e => console.log('自动播放被阻止:', e));
  }
};

const handleMediaLoad = () => {

  if (swiperInstance.value) {
    swiperInstance.value.update();
  }
};

const pauseAutoplay = () => {
  if (swiperInstance.value && swiperInstance.value.autoplay) {
    swiperInstance.value.autoplay.stop();
  }
};

const resumeAutoplay = () => {
  if (swiperInstance.value && swiperInstance.value.autoplay) {
    swiperInstance.value.autoplay.start();
  }
};

// 响应式处理
onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
  if (swiperInstance.value) {
    swiperInstance.value.update();
  }
};
</script>

<style scoped>
.swiper-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

.my-swiper {
  width: 100%;
  height: 100%;
}

.swiper-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.custom-dom {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  font-size: 24px;
}

/* 导航按钮样式 */
.swiper-button-prev,
.swiper-button-next {
  color: white;
  background: rgba(0, 0, 0, 0.5);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: rgba(0, 0, 0, 0.8);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 20px;
  font-weight: bold;
}

/* 分页器样式 */
.swiper-pagination {
  position: absolute;
  bottom: 10px;
}

.swiper-pagination-bullet {
  background: white;
  opacity: 0.6;
  width: 8px;
  height: 8px;
}

.swiper-pagination-bullet-active {
  background: #007aff;
  opacity: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 30px;
    height: 30px;
  }
  
  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 16px;
  }
}
</style>